<html>

<head>
  <title>Vex Glyphs</title>
  <script src="../../../tests/support/jquery.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
    body {
      padding: 20px;
      background: white;
      font-family: Caslon, Garamond, Arial, Helvetica, sans-serif;
      font-size: 18px;
      color: green;
      margin: 0px;
      height: 80%;
    }

    a {
      color: #green;
      text-decoration: none;
      border-bottom: dotted 2px;
    }

    a.button {
      color: #green;
      background: #bfb;
      text-decoration: none;
      padding: 5px;
      margin: 2px;
      border: 5px solid #aea;
    }

    div#error {
      width: 60%;
      padding: 10px;
      color: red;
      background: #faa;
      border: 15px solid #d99;
    }
  </style>

  <script src="../../../build/vexflow-debug.js"></script>
  <script>
    $(function () {
      var canvas = document.getElementById("glyphs");
      var x = 0;

      const glyphs = Vex.Flow.Fonts.Gonville.getGlyphs();

      // Get number of glyphs and rename elements
      var counter = Object.keys(glyphs).length;

      var canvas_height = ((counter + 1) / (800 / (80 * 2))) * 60;
      var canvas_width = 900;

      // Retina display trick
      canvas.height = canvas_height * 2;
      canvas.width = canvas_width * 2;
      canvas.style.height = canvas_height
      canvas.style.width = canvas_width
      var ctx = canvas.getContext("2d")
      ctx.scale(2, 2);

      ctx.font = "10pt Courier";

      var y = 60;
      for (var glyph in glyphs) {
        ctx.fillStyle = "#222";
        ctx.font = "8pt Arial";
        ctx.fillText(glyph.slice(0, 15), x, y + 25);
        x += 60;

        ctx.strokeStyle = "#aaa";
        ctx.beginPath();
        ctx.moveTo(x - 5, y);
        ctx.lineTo(x + 5, y);
        ctx.stroke()

        ctx.beginPath();
        ctx.moveTo(x, y - 5);
        ctx.lineTo(x, y + 5);
        ctx.stroke()

        ctx.fillStyle = "green";

        if (glyphs[glyph].o) {
          g = new Vex.Flow.Glyph(glyph, 38, { font: Vex.Flow.Fonts.Gonville });
          g.render(ctx, x, y);
          ctx.save();
          ctx.font = "6pt Arial";
          var metrics = g.getMetrics();
          ctx.fillText(Math.floor(g.getMetrics().width), x - 35, y - 15);
          ctx.fillText(Math.floor(g.getMetrics().height), x - 35, y - 8);
          // ctx.fillText(Math.floor(g.getMetrics().x_min), x - 25, y - 1 );
          // ctx.fillText(Math.floor(g.getMetrics().x_max), x - 25, y + 8 );
          ctx.restore();
        }
        x += 60;

        if (x >= 800) {
          x = 0;
          y += 80;
        }
      }
    });
  </script>
</head>

<body>
  <center>
    <h1>Gonville Glyphs</h1>
    <p>
      <i>Cross indicates render coordinates.</i>
    </p>

    <canvas id="glyphs" width="800" height="1600">
      HTML5 Canvas not supported on this browser.
    </canvas>

    <p>
      For more information visit <a href="http://0xfe.blogspot.com">0xfe.blogspot.com</a>.
    </p>

  </center>
</body>

</html>